<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-02-27 13:53:17
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-02-27 14:42:05
 * @FilePath: /hr_new_vue3/src/views/Management/Human/ChangeManagement/InductionManagement/EntryApplicationSetting/AddSetting/Components/Preview/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 预览 -->
<!-- 模板复制弹窗-->
<template>
  <a-modal
    v-model:visible="modalVisible"
    :modal-style="{
      boxShadow: '0px 0px 10px rgba(0, 0, 0, .6)',
      borderRadius: '50px',
      width: '250px',
      position: 'relative',
      height: ' 550px'
    }"
    :body-style="{
      height: '100%'
    }"
    :footer="false"
    simple
  >
    <template #title>
      <icon-close-circle-fill
        class="close"
        @click="modalVisible = false"
        :size="30"
      />
    </template>
    <a-scrollbar style="height: 400px; overflow: auto" type="track">
      <a-form :model="data" autoLabelWidth>
        <a-form-item
          hide-label
          v-for="(item, index) in data"
          :key="index"
          :required="item.isDefault"
        >
          <a-input
            :placeholder="`请输入${item.ctlCnName}${
              item.isDefault ? '(必填)' : ''
            }`"
            v-if="item.ctlComponentType === 'TEXT'"
          />
          <a-select
            :placeholder="`请输入${item.ctlCnName}${
              item.isDefault ? '(必选)' : ''
            }`"
            v-else-if="item.ctlComponentType === 'SELECT'"
          />
          <a-input-number
            :placeholder="`请输入${item.ctlCnName}${
              item.isDefault ? '(必填)' : ''
            }`"
            v-else-if="item.ctlComponentType === 'TEXT_NUMBER'"
            hide-button
          />
          <a-input-number
            :placeholder="`请输入${item.ctlCnName}${
              item.isDefault ? '(必填)' : ''
            }`"
            v-else-if="item.ctlComponentType === 'TEXT_AREA'"
          />
          <a-date-picker
            :placeholder="`请输入${item.ctlCnName}${
              item.isDefault ? '(必选)' : ''
            }`"
            v-else-if="item.ctlComponentType === 'DATE'"
          />
          <a-range-picker
            :placeholder="`请输入${item.ctlCnName}${
              item.isDefault ? '(必选)' : ''
            }`"
            v-else-if="item.ctlComponentType === 'DATE_RANGE'"
          />
          <!-- <div v-else-if="item.ctlComponentType === 'RADIO'">
            <span> {{ item.ctlCnName }} </span>
            <a-radio-group>
              <a-radio
                :placeholder="`请输入${item.ctlCnName}${
                  item.isDefault ? '(必选)' : ''
                }`"
              />
            </a-radio-group>
          </div> -->
        </a-form-item>
      </a-form>
    </a-scrollbar>
    <a-button type="primary" class="btn">提交填写</a-button>
    <div class="round"></div>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: any; // 传入的数据
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emits('update:visible', visible);
  }
});

watch(
  () => props.visible,
  (val) => {
    if (val) {
      console.log(props.data);
    }
  }
);

const handleOk = async () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.close {
  position: absolute;
  top: 0;
  right: -40px;
  cursor: pointer;
  color: #ccc;
}

.btn {
  position: absolute;
  width: 200px;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}
.round {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 4px solid #e4e4e4;
  border-radius: 50%;
  bottom: 10px;
  right: 50%;
  transform: translate(28px, 0);
}
</style>
